<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="search">
				<text class="iconfont icon-fadajing"></text>
				<input type="text" v-model="keyword" placeholder="搜索商品" />
			</view>
			<view class="cut" @click="isList = !isList">
				<text class="iconfont" :class="isList?'icon-shitu01':'icon-shitu02'"></text>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen-info">
			<view class="screen-list">
				<view class="list" :class="{'action':screenShow===0}" @click="onSynthesize(0)">
					<text>综合</text>
					<text class="iconfont icon-sanjiao icon_z"></text>
				</view>
				<view class="list">
					<text>销量</text>
					<text></text>
				</view>
				<view class="list" :class="{'action':is_price==1}">
					<text>价格</text>
					<view class="icon_j account">
						<text class="iconfont icon-sanjiao up" @click="updatebyprice(1)"></text>
						<text class="iconfont icon-sanjiao down" @click="updatebyprice(0)"></text>
					</view>
				</view>
				<view class="list" @click="isDrawer = true">
					<text>筛选</text>
					<text class="iconfont icon-shaixuan icon_s"></text>
				</view>
			</view>
			<!-- 筛选弹窗 -->
			<view class="screen-popup" @click.stop="isScreen = false" v-show="isScreen">
				<view class="synthesize">
					<view class="list">
						<text class="check"></text>
						<text class="title">综合排序</text>
					</view>
					<view class="list">
						<text class="check"></text>
						<text class="title">评论数从高到低</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :top="0">
				<view class="goods-list">
					<view :class="isList?'list-view':'list-li'" v-for="(item,index) in goodsList"
						@click="onGoodsList(item)" :key="index">
						<view class="thumb">
							<image :src="item.skuImg" mode="heightFix"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit" v-html="item.skuTitle"></text>
							</view>
							<view class="price">
								<view class="retail-price">
									<text class="min">￥</text>
									<text class="max">{{item.skuPrice}}</text>
									<view class="tag" v-if="item.is_goods === 1">
										<text>抢购价</text>
									</view>
								</view>
								<view class="vip-price">
									<text class="min">￥</text>
									<text class="max">{{item.skuPrice}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false"
			style="position: absolute;">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<view class="title">
						<text>品牌</text>
					</view>
					<view class="serve-list">
						<view class="list" :class="item.brandId==params.brandId?'action':''"
							v-for="(item,index) in brands" :key="index">
							<text @click="brandselect(item.brandId)">{{item.brandName}}</text>
						</view>

					</view>
				</view>
				<view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<input type="number" v-model="minprice" placeholder="最低价">
						<text></text>
						<input type="number" v-model="maxprice" placeholder="最高价">
					</view>
				</view>
				<view class="serve" v-for="(item,index) in attrs" :key="index">
					<view class="title">
						<text>{{item.attrName}}</text>
					</view>
					<view class="serve-list">
						<text class="list" v-for="(value,idx) in item.attrValue"
							:class="[classObject(item.attrId,item.attrValue[idx],idx)]"
							@click.stop="attrSelect(item.attrId,item.attrName,idx,value.attrValue)"
							:key="idx">{{value}}</text>
					</view>
				</view>

				<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action" @click.stop="action()">
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>

		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: false
				},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: 0,
				// 抽屉
				isDrawer: false,
				keyword: '',
				// 价格排序
				is_price: 0,
				goodsList: [

				],
				AttrIndex: 0,
				SizeIndex: 0,
				brands: [],

				params: {
					keyword: null,
					brandId: null,
					catalog3Id: null,
					sort: [

					],
					hasStock: null,
					skuPrice: null,
					attrs: [],
					pageNum: 1,

				},
				minprice: '',
				maxprice: '',
				xialaTwice: 0,
				shanglaiTwice: 0,
				attrs: [],


			}
		},

		computed: {
			classObject() {
				return function(id, name, index) {
					return this.methodGetByteLen(id, name, index)
				}
			}
		},

		onLoad(params) {
			this.keyword = decodeURIComponent(params.keyword || '');

			this.params.keyword = params.keyword
			this.$u.api.getSearch(this.params).then(res => {
				console.log(res);
				this.goodsList = res.data.product
				this.brands = res.data.brands
				this.attrs = res.data.attrs
			})
		},
		watch: {




		},


		methods: {
			methodGetByteLen(id, name, index) {
				var ar = this.params.attrs.find(function(element) {
					return element.id == id && element.selectId == index
				});
				if (ar != undefined) {
					return "action"
				}
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				console.log("下拉");
				this.mescroll.endSuccess();
			},

			action() {
				if (this.minprice != 0 && this.maxprice != 0) {
					console.log("你选择了 第一中");
					this.params.skuPrice=this.minprice+"_"+this.maxprice
				}
			 if(this.minprice != 0 && this.maxprice ==0) 
				{
					console.log("你选择了 第二种");
					this.params.skuPrice=this.minprice+"_"
				}
				if(this.maxprice !=0 && this.minprice ==0)					
				{
					console.log("你选择了 第三种");
					this.params.skuPrice="_"+this.maxprice
				}
				
			
				if (this.maxprice !='' &&  this.maxprice < this.minprice) {
					this.$refs.uToast.show({
						title: '价格筛选有误',
						type: 'warning',
					
					})
				}
				
				this.isDrawer =false
				this.searchData()
			
			},


			/*上拉加载的回调*/
			upCallback(page) {
				console.log("上拉");

				this.params.pageNum++
				this.$u.api.getSearch(this.params).then(res => {

					if (res.data.product.length) {
						this.goodsList = [...this.goodsList, ...res.data.product];
					} else {
						this.params.pageNum--;
					}


				})
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			searchData() {
				this.params.pageNum = 1
				this.$u.api.getSearch(this.params).then(res => {
					this.goodsList = res.data.product

				})
			},
			/**
			 * 返回点击
			 */
			onBack() {
				uni.navigateBack();
			},

			updatebyprice(status) {


				let arrIndex = this.params.sort.findIndex(item => {
					//这里的判断条件按你需求来写
					return item.type == 'skuPrice'
				})

				if (arrIndex > -1) {
					this.params.sort.splice(arrIndex, 1)
					this.params.sort.push({
						type: 'skuPrice',
						status: status
					})
					this.searchData()
				} else {
					this.params.sort.push({
						type: 'skuPrice',
						status: status
					})
					this.searchData()
				}
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type) {
				this.screenShow = type;
				this.isScreen = !this.isScreen;
			},
			/**
			 * 商品列表点击
			 */
			onGoodsList(item) {
				uni.navigateTo({

					url: '/pages/GoodsDetails/GoodsDetails?id=' + item.skuId,
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})

			},

			brandselect(id) {
				this.params.brandId = id
			},
			attrSelect(id, attrName, j, attrValue) {
				let arrIndex = this.params.attrs.findIndex(item => {
					//这里的判断条件按你需求来写
					return item.id == id && item.selectId == j
				})


				if (arrIndex > -1) {
					this.params.attrs.splice(arrIndex, 1)
					this.params.attrs.push({
						id: id,
						attrName: attrName,
						selectId: j,
						attrValue: attrValue

					})

				} else {
					this.params.attrs.push({
						id: id,
						attrName: attrName,
						selectId: j,
						attrValue: attrValue
					})

				}

			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'SearchGoodsList.scss';
</style>
